<template>
  <div class="indexView">
    <!-- todo 头部 -->
    <header class="wrap">
      <router-link to="/search" class="search">
        <div class="logo icon-search iconfont"></div>
        <div class="text">请输入书名或作者名</div>
      </router-link>

      <div class="user">
        <router-link to="/bookShelf" class="btn booklist">
          <img src="../assets/imgs/shujia.png" alt="" />
          <span>书架</span>
        </router-link>
        <router-link to="/My" class="btn logo">
          <img src="../assets/imgs/user-logo.png" alt="" />
          <span>我的</span>
        </router-link>
      </div>
    </header>
    <!-- todo 头部 -->

    <!-- todo 轮播图 -->
    <main class="wrap" v-if="bannerList">
      <van-swipe
        class="my-swipe"
        :autoplay="3000"
        indicator-color="white"
        @change="onChange"
      >
        <van-swipe-item v-for="(vl, i) in bannerList" :key="i">
          <router-link
            tag="img"
            :to="'/details?id=' + vl.bid"
            :src="vl.icon"
            alt=""
          />
        </van-swipe-item>

        <template #indicator>
          <div class="btn">
            <div
              class="item"
              v-for="i in bannerList.length"
              :key="i"
              :class="{ con: i == indicator_index + 1 }"
            ></div>
          </div>
        </template>
      </van-swipe>
    </main>
    <!-- todo 轮播图 -->

    <!-- todo 性别分类区域 -->
    <div class="sex wrap">
      <router-link :to="'./classify?type=girl'" class="item">
        <div class="logo">
          <img src="../assets/imgs/girl.png" alt="" />
        </div>
        <span>女生</span>
      </router-link>
      <router-link :to="'./classify?type=boy'" class="item">
        <div class="logo">
          <img src="../assets/imgs/boy.png" alt="" />
        </div>
        <span>男生</span>
      </router-link>
    </div>
    <!-- todo 性别分类区域 -->

    <!-- todo 类型1 男频主编推荐 -->
    <div class="list1 l_type1 wrap" v-if="boy_list">
      <div class="title">{{ boy_list.title }}</div>
      <div class="content">
        <router-link
          :to="'/details?id=' + vl.bid"
          class="item"
          v-for="vl in boy_list.data.items"
          :key="vl.bid"
        >
          <div class="img">
            <img :src="vl.bookCover" alt="" />
          </div>
          <div class="text">
            <h3 class="one-txt-cut">{{ vl.bookName }}</h3>
            <p>{{ vl.author }}</p>
          </div>
        </router-link>
      </div>
    </div>
    <!-- todo 类型1 男频主编推荐 -->

    <!-- todo 类型1 女频主编推荐 -->
    <div class="list2 l_type1 wrap" v-if="girl_list">
      <div class="title">{{ girl_list.title }}</div>
      <div class="content">
        <router-link
          :to="'/details?id=' + vl.bid"
          class="item"
          v-for="vl in girl_list.data.items"
          :key="vl.bid"
        >
          <div class="img">
            <img :src="vl.bookCover" alt="" />
          </div>
          <div class="text">
            <h3 class="one-txt-cut">{{ vl.bookName }}</h3>
            <p>{{ vl.author }}</p>
          </div>
        </router-link>
      </div>
    </div>
    <!-- todo 类型1 女频主编推荐 -->

    <!-- todo 类型2 男生爽文 -->
    <div class="list3 l_type2 wrap" v-if="boyMoreList">
      <div class="title">
        <h3>{{ boyMoreList.title }}</h3>
        <p @click="bookSort(boyMoreList.data.items)">换一换</p>
      </div>
      <div class="content">
        <router-link
          :to="'/details?id=' + vl.bid"
          class="item"
          v-for="(vl, i) in boyMoreList.data.items"
          :key="vl.bid"
          v-show="i < 3"
        >
          <div class="img">
            <img :src="vl.bookCover" alt="" />
          </div>
          <div class="text">
            <div class="title">{{ vl.bookName }}</div>
            <p>{{ vl.desc }}</p>
            <div class="author">
              <div class="name">{{ vl.author }}</div>
              <div class="type">{{ vl.tags[vl.tags.length - 1] }}</div>
            </div>
            <div class="line"></div>
          </div>
        </router-link>
      </div>
    </div>
    <!-- todo 类型2 男生爽文 -->

    <!-- todo 类型2 女生畅销 -->
    <div class="list3 l_type2 wrap" v-if="girlMoreList">
      <div class="title">
        <h3>{{ girlMoreList.title }}</h3>
        <p>换一换</p>
      </div>
      <div class="content">
        <router-link
          :to="'/details?id=' + vl.bid"
          class="item"
          v-for="vl in girlMoreList.data.items"
          :key="vl.bid"
        >
          <div class="img">
            <img :src="vl.bookCover" alt="" />
          </div>
          <div class="text">
            <div class="title">{{ vl.bookName }}</div>
            <p>{{ vl.desc }}</p>
            <div class="author">
              <div class="name">{{ vl.author }}</div>
              <div class="type">{{ vl.tags[vl.tags.length - 1] }}</div>
            </div>
            <div class="line"></div>
          </div>
        </router-link>
      </div>
    </div>
    <!-- todo 类型2 女生畅销 -->

    <!-- todo 类型1 男频最新爆款 -->
    <div class="list4 l_type1 wrap" v-if="boyNewList">
      <div class="title">{{ boyNewList.title }}</div>
      <div class="content">
        <router-link
          :to="'/details?id=' + vl.bid"
          class="item"
          v-for="vl in boyNewList.data.items"
          :key="vl.id"
        >
          <div class="img">
            <img :src="vl.bookCover" alt="" />
          </div>
          <div class="text">
            <h3 class="one-txt-cut">{{ vl.bookName }}</h3>
            <p>{{ vl.author }}</p>
          </div>
        </router-link>
      </div>
    </div>
    <!-- todo 类型1 男频最新爆款 -->

    <!-- todo 类型1 女频最新爆款 -->
    <div class="list4 l_type1 wrap" v-if="girlNewList">
      <div class="title">{{ girlNewList.title }}</div>
      <div class="content">
        <router-link
          :to="'/details?id=' + vl.bid"
          class="item"
          v-for="vl in girlNewList.data.items"
          :key="vl.id"
        >
          <div class="img">
            <img :src="vl.bookCover" alt="" />
          </div>
          <div class="text">
            <h3 class="one-txt-cut">{{ vl.bookName }}</h3>
            <p>{{ vl.author }}</p>
          </div>
        </router-link>
      </div>
    </div>
    <!-- todo 类型1 女频最新爆款 -->

    <!-- todo 类型1 男频完结精品 -->
    <div class="list4 l_type1 wrap" v-if="boyOverList">
      <div class="title">{{ boyOverList.title }}</div>
      <div class="content">
        <router-link
          :to="'/details?id=' + vl.bid"
          class="item"
          v-for="vl in boyOverList.data.items"
          :key="vl.id"
        >
          <div class="img">
            <img :src="vl.bookCover" alt="" />
          </div>
          <div class="text">
            <h3 class="one-txt-cut">{{ vl.bookName }}</h3>
            <p>{{ vl.author }}</p>
          </div>
        </router-link>
      </div>
    </div>
    <!-- todo 类型1 男频完结精品 -->

    <!-- todo 类型1 女频完结精品 -->
    <div class="list4 l_type1 wrap" v-if="girlOverList">
      <div class="title">{{ girlOverList.title }}</div>
      <div class="content">
        <router-link
          :to="'/details?id=' + vl.bid"
          class="item"
          v-for="vl in girlOverList.data.items"
          :key="vl.id"
        >
          <div class="img">
            <img :src="vl.bookCover" alt="" />
          </div>
          <div class="text">
            <h3 class="one-txt-cut">{{ vl.bookName }}</h3>
            <p>{{ vl.author }}</p>
          </div>
        </router-link>
      </div>
    </div>
    <!-- todo 类型1 女频完结精品 -->

    <!-- todo banner -->
    <div class="footer-info wrap">
      <span class="text">阿里文学出品</span>
      <div class="line"></div>
    </div>
    <!-- todo banner -->
  </div>
</template>

<script>
import { getIndexData } from "../api/index";
export default {
  data() {
    return {
      IndexData: null,
      bannerList: null,
      indicator_index: 0,
      boy_list: null, //男生主频推荐
      girl_list: null, //女生主频推荐
      boyMoreList: null, //男生更多列表
      girlMoreList: null, //女生更多列表
      boyNewList: null, //男生最新列表
      girlNewList: null, //女生最新列表
      boyOverList: null, //男生完结精品
      girlOverList: null, //女生完结精品
    };
  },
  methods: {
    onChange(index) {
      this.indicator_index = index;
    },
    // 获取首页数据
    getIndexDataFun() {
      getIndexData().then((data) => {
        this.IndexData = data.data.models;
        this.bannerList = this.IndexData[1].data.items;
        this.boy_list = this.IndexData[3];
        this.girl_list = this.IndexData[4];
        this.boyMoreList = this.IndexData[5];
        this.girlMoreList = this.IndexData[6];
        this.boyNewList = this.IndexData[7];
        this.girlNewList = this.IndexData[8];
        this.boyOverList = this.IndexData[9];
        this.girlOverList = this.IndexData[10];
      });
    },
    // 打乱数组顺序
    bookSort(array) {
      array.sort(() => (Math.random() > 0.5 ? 1 : -1));
    },
  },
  created() {
    this.getIndexDataFun();
  },
};
</script>



<style lang="scss" scoped>
.indexView {
  padding-bottom: 50px;

  header {
    display: flex;
    box-sizing: border-box;
    align-items: center;
    height: 54px;
    padding: 8px 16px;

    > .search {
      height: 31px;
      background: #f5f5f5;
      // width: 70%;
      display: flex;
      align-items: center;
      color: #999;
      border-radius: 5px;
      flex: 1;

      > .logo {
        font-size: 18px;
        margin-left: 8px;
      }

      > .text {
        font-size: 14px;
        margin-left: 4px;
      }
    }

    > .user {
      width: 96px;
      height: 38px;
      padding-right: 4px;
      display: flex;

      > .btn {
        width: 24px;
        height: 38px;
        margin-left: 22.5px;
        background-size: contain;
        background-repeat: no-repeat;
        display: flex;
        flex-direction: column;
        align-items: center;
        font-size: 10px;
        color: #333;

        > img {
          width: 100%;
        }
      }
    }
  }

  main {
    box-sizing: border-box;
    padding: 42px 16px 22px;

    img {
      width: 100%;
    }

    .btn {
      width: 100%;
      display: flex;
      justify-content: center;

      > .item {
        background: #f0f0f0;
        opacity: 0.7;
        position: relative;
        top: -14px;
        width: 10px;
        height: 4px;
        margin: 0 4px;

        &.con {
          background: #fff;
          opacity: 1;
        }
      }
    }
  }

  .sex {
    display: flex;
    box-sizing: border-box;
    padding: 0 16px;
    height: 64px;

    > .item {
      width: 50%;
      height: 100%;
      text-align: center;
      color: #999;

      > .logo {
        height: 48px;

        > img {
          margin: 0 auto;
          width: 48px;
          height: 48px;
        }
      }
    }
  }

  .l_type1 {
    box-sizing: border-box;
    padding: 8px 16px 0;

    > .title {
      height: 20px;
      line-height: 20px;
      padding: 24px 0 12px;
      font-size: 18px;
    }

    > .content {
      margin-top: 8px;
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;

      > .item {
        width: 32%;
        margin-bottom: 16px;

        > .img {
          width: 100%;

          > img {
            width: 100%;
            height: 100%;
          }
        }

        > .text {
          height: 36px;
          width: 100%;
          padding-top: 4px;

          > h3 {
            height: 16px;
            font-size: 13px;
            color: #333;
          }

          > p {
            color: #999;
            font-size: 12px;
            margin-top: 4px;
          }
        }
      }
    }
  }

  .l_type2 {
    box-sizing: border-box;
    padding: 8px 16px 0;

    > .title {
      height: 20px;
      line-height: 20px;
      padding: 24px 0 12px;
      font-size: 18px;
      display: flex;
      justify-content: space-between;
      align-items: center;

      > p {
        color: #23b383;
        font-size: 14px;
      }
    }

    > .content {
      > .item {
        display: flex;
        width: 100%;

        > .img {
          width: 32%;
          margin: 8px 0;

          > img {
            width: 100%;
            height: 100%;
          }
        }

        > .text {
          flex: 1;
          display: flex;
          flex-wrap: wrap;
          margin-top: 16px;
          margin-left: 12px;
          position: relative;
          flex-direction: column;
          justify-content: space-between;

          > .title {
            color: #333;
            font-size: 16px;
          }

          > p {
            height: 40px;
            line-height: 20px;
            margin: 15px 0;
            font-size: 13px;
            color: #999;
            overflow: hidden;
            text-overflow: ellipsis;
          }

          > .author {
            display: flex;
            width: 100%;
            justify-content: space-between;
            padding: 20px 0 12px;
            line-height: 24px;
            color: #999;
            font-size: 13px;

            > .type {
              width: 24px;
              height: 12px;
              line-height: 12px;
              padding: 4px 8px;
              background: #f5f5f5;
              border-radius: 4px;
              color: #000;
              font-size: 12px;
            }
          }

          > .line {
            position: absolute;
            bottom: 0;
            width: 100%;
            height: 1px;
            background: #e5e5e5;
            transform: scaleY(0.5);
          }
        }
      }
    }
  }

  .footer-info {
    height: 18px;
    line-height: 18px;
    color: #ccc;
    font-size: 13px;
    text-align: center;
    margin: 15px auto 0px;
    position: relative;

    > .text {
      padding: 0 10px;
      background: #fff;
      position: relative;
      z-index: 10;
    }

    > .line {
      position: absolute;
      left: 0;
      right: 0;
      top: 9px;
      bottom: 10px;
      margin: auto;
      height: 1px;
      width: 50%;
      background: #ccc;
    }
  }

  .my-swipe .van-swipe-item {
    box-shadow: 0 6px 12px 0 rgb(0 0 0 / 5%);
  }
}
</style>